import modalStore from "@/store/modal";
import { Button, Form, View } from "@tarojs/components";
import { useContext, useEffect } from "react";
const MyModal: React.FC<{
  cancel?: ModalType.Callback;
  confirm?: ModalType.Callback;
}> = ({ cancel, confirm }): JSX.Element => {
  const { closeModal, content } = useContext(modalStore);
  useEffect(() => {
    console.log("MyModal onLoad", content);
  }, []);
  return (
    <View
      className={`visible my-modal w-screen h-screen grid gird-col-1 place-content-center`}
    >
      <Form className="block w-7_10 my-modal-box shadow-md">
        <View className="my-modal-header"></View>
        <View className="my-modal-content">{content}</View>
        <View className="my-modal-footer h-40">
          <Button
            className="w-1_2 h-full border-0 flex justify-center items-center"
            onClick={() => {
              cancel?.();
              closeModal();
            }}
          >
            取消
          </Button>
          <Button
            className="w-1_2 h-full border-0 flex justify-center items-center"
            onClick={() => {
              confirm?.();
              closeModal();
            }}
          >
            确认
          </Button>
        </View>
      </Form>
    </View>
  );
};

export default MyModal;
